[iOS 9] ノンコーディングで Storyboard を分割できる Storyboard Reference

はじめに

こんにちは、モバイルアプリサービス部の荒川です。

この記事では、Xcode 7 から追加されたUIコンポーネントの1つ Storyboard Reference について紹介します。

iOS アプリ開発で UI の作成に Storyboard を使用している方を、主な対象読者とします。

Storyboard・Segue と聞いて何かわからないと言う方は、 [iOS]これからiOSアプリを作る方向け Storyboardで画面遷移を作る を参考にして下さい。

iPhone アプリ開発では、使用する言語（Objective-C・Swift）に関わらず、一般的なUIコンポーネントであれば Storyboard で作成することが可能です。コードでも UI を作成することはもちろん可能ですが、ViewController クラスが肥大化し、冗長なコードとなりやすいので、Storyboard を使用することを強くオススメします。

今回作成するサンプルプロジェクトは、GitHub で公開しております。実装が気になった方は参考にして下さい。

Storyboard Reference とは

Storyboard Reference は、待ち望んでいた方が多いと思われる新UIコンポーネントの1つです。GUI 上で Storyboard の分割が行えます。Segue の接続、参照する Storyboard の追加を行うだけで利用することができます。

筆者の執筆時の開発環境は以下のとおりです。

開発環境

• Xcode 7.0
• Deployment Target iOS 9.0

Storyboard Reference は非常に便利な機能ですが、 Xcode 7 以降かつ、iOS 9 以降でしか全ての機能を利用できません。Deployment Target が iOS 8.0 などでは、Relationship Segue ではビルドエラーとなります。

e.g.) Deployment Target 8.0 で TabBarController に ViewControllers Segue で接続した場合

以下の使用方法であれば iOS 8でも利用が可能 です。

OK

• Trigger Segue
• Push / Modal の遷移先を Storyboard References に設定
• Embed Segue
• ContainerView の 参照先を Storyboard References に設定

NG

• Relationship Segue
• TabBarController の 子ViewController を Storyboard References に設定
• NavigationController の 子ViewController を Storyboard References に設定

Storyboard Reference の何が良いのか

Storyboard Reference を使わないとなるとどうなるのでしょうか。弊社横山の記事「[iOS] チーム開発するなら Storyboard を分割セヨ」をご覧になって頂くとわかりやすいです。

上記に書かれているコンフリクトのリスクが大幅に軽減され、Storyboard の分割がさらに簡単に、 ノンコーディング で行えるようになります。これによって Storyboard の再利用性が、意識しなくても非常に高くなるかと思います。複数の画面から同一の Storyboard（フロー）に遷移させたい場合は、有効な機能となります。

Storyboard Reference の実装方法

今回は、TabBarController の 「Relationship Segue」で接続されている ViewController 群を、タブ毎の Storyboard に分割します。

実装手順

1. 参照したい Storyboard の追加
2. Storyboard Reference コンポーネントを配置し参照を追加
3. Storyboard Reference へ Segue を接続
4. 分割された Storyboard の実装

上記の順番に実装していきましょう。

1. 参照したい Storyboard の追加

まずは必要なタブ数分の Storyboard を作成します。

プロジェクトナビゲーターの任意の箇所で右クリックし 「New File...」を選択します。もしプロジェクトナビゲーターが表示されていなければ Command + 1で出てきます。グループ（フォルダアイコン）を選択して Command + Nでファイルの追加も行えます。

4つのタブ「A・B・C・D」の Storyboard を追加します。

2. Storyboard Reference コンポーネントを配置し参照を追加

Main.Storyboard のコンポーネントを以下の様に配置します。

配置した Storyboard Reference に参照を追加します。

参照を追加した Storyboard Reference コンポーネントをダブルクリックすると、参照先の Storyboard へ遷移することができます。 プロジェクトナビゲーターで参照先の Storyboarod の名前を探す必要がないので、知っておくと良いでしょう。

3. Storyboard Reference へ Segue を接続

Storyboard Reference に Segue を接続します。

全ての Storyboard Reference に Segue を接続して下さい。

4. 分割された Storyboard の実装

先ほど作成した A.Storyboard に ViewController を配置し、「Is Initial View Controller」にチェックします。

配置した ViewController は TabBarController に接続される想定なので、 TabBarItem を追加します。

B, C, D, Storyboard も同様にコンポーネントを配置して下さい。

実装後、実行すると以下のようになります。

一般的な TabBarController の Storyboard の分割がノンコーディングで行えました。

考察

UIコンポーネントの不具合は、実行時エラーが起きるまでは確認ができないもの という認識が今までは強かったですが、この Storyboard Reference は参照先の Storyboard が存在しなければビルドエラーを出してくれます。

これによって、Storyboard 名の文字列指定を間違えて（Storyboard 名でスペルミス等が起きていると、たまにハマる）インスタンス生成が行えずに、無駄にデバッグ時間を費やしてしまうことを回避できます。そのため、従来のUIコンポーネントと比較して、より高機能かつ安全なコンポーネントであると感じました。

まとめ

今回紹介した Storyboard Reference は iOS 8 以降がサポート対象であれば、すぐにでも使えるコンポーネントとなっています。今後、スタンダードなコンポーネントとなることは間違いありませんので、今から抑えておくと良いでしょう。